<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈某的梦幻之夜</title>
    <link rel="icon" href="./imgs/icon.jpg">
    <style>
        html {
            height: 100%;
            user-select: none;
            cursor: url('./imgs/cursor.png'), auto;
        }

        body {
            background: linear-gradient(to bottom, #002855, 40%, #560bad);
            width: 100vw;
            overflow: hidden;
        }

        .reflect-line {
            position: absolute;
            width: 100%;
            height: 5px;
            left: 0px;
            bottom: 150px;
            background: linear-gradient(to right,
                    #168aad,
                    #4cc9f0,
                    #ffd166,
                    #f8961e,
                    #f3722c,
                    #f72585,
                    #560bad,
                    #168aad);
            z-index: 2;
        }

        .b-1 {
            position: absolute;
            height: 190px;
            width: 60px;
            top: 349px;
            left: -10px;
            background: linear-gradient(to top, #168aad, 40%, #001845);
            box-shadow: 0px -5px 0px #4ecdc4;
            -webkit-box-reflect: below 3px linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
            z-index: 1;
        }

        .w-1 {
            position: absolute;
            height: 5px;
            width: 15px;
            top: 10px;
            left: 15px;
            z-index: 1;
            box-shadow: 22px 0px 0px #4ecdc4, 0px 12px 0px #4ecdc4, 0px 24px 0px #4ecdc4,
                22px 24px 0px #4ecdc4, 22px 36px 0px #4ecdc4, 0px 36px 0px #4ecdc4,
                22px 48px 0px #4ecdc4, 22px 60px 0px #4ecdc4, 0px 72px 0px #4ecdc4,
                22px 72px 0px #4ecdc4, 22px 84px 0px #4ecdc4, 0px 84px 0px #4ecdc4,
                22px 96px 0px #4ecdc4, 0px 96px 0px #4ecdc4, 22px 108px 0px #4ecdc4,
                0px 108px 0px #4ecdc4, 22px 120px 0px #4ecdc4, 22px 132px 0px #4ecdc4,
                22px 144px 0px #4ecdc4, 0px 144px 0px #4ecdc4, 22px 156px 0px #4ecdc4,
                0px 156px 0px #4ecdc4, 22px 168px 0px #4ecdc4, 0px 168px 0px #4ecdc4;
        }

        .ba-item {
            opacity: 0;
        }

        .bi-1 {
            animation: lamp-1 .001s forwards linear 1.95s;
        }

        .bi-2 {
            animation: lamp-1 .001s forwards linear 2s;
        }

        .bi-3 {
            animation: lamp-1 .001s forwards linear 2.04s;
        }

        .bi-4 {
            animation: lamp-1 .001s forwards linear 2.08s;
        }

        .bi-5 {
            animation: lamp-1 .001s forwards linear 2.12s;
        }

        .bi-6 {
            animation: lamp-1 .001s forwards linear 2.16s;
        }

        .bi-7 {
            animation: lamp-1 .001s forwards linear 2.2s;
        }

        .bi-8 {
            animation: lamp-1 .001s forwards linear 2.24s;
        }

        .bi-9 {
            animation: lamp-1 .001s forwards linear 2.28s;
        }

        .bi-10 {
            animation: lamp-1 .001s forwards linear 2.31s;
        }

        .bi-11 {
            animation: lamp-1 .001s forwards linear 2.34s;
        }

        .bi-12 {
            animation: lamp-1 .001s forwards linear 2.37s;
        }

        .bi-13 {
            animation: lamp-1 .001s forwards linear 2.4s;
        }

        .bi-14 {
            animation: lamp-1 .001s forwards linear 2.43s;
        }

        .bi-15 {
            animation: lamp-1 .001s forwards linear 2.46s;
        }

        .bi-16 {
            animation: lamp-1 .001s forwards linear 2.49s;
        }

        .bi-17 {
            animation: lamp-1 .001s forwards linear 2.52s;
        }

        .bi-18 {
            animation: lamp-1 .001s forwards linear 2.55s;
        }

        .bi-19 {
            animation: lamp-1 .001s forwards linear 2.58s;
        }

        .bi-20 {
            animation: lamp-1 .001s forwards linear 2.6s;
        }

        .bi-21 {
            animation: lamp-1 .001s forwards linear 2.62s;
        }

        .bi-22 {
            animation: lamp-1 .001s forwards linear 2.64s;
        }

        .bi-23 {
            animation: lamp-1 .001s forwards linear 2.66s;
        }

        .bi-24 {
            animation: lamp-1 .001s forwards linear 2.68s;
        }

        .bi-25 {
            animation: lamp-1 .001s forwards linear 2.7s;
        }

        .bi-26 {
            animation: lamp-1 .001s forwards linear 2.72s;
        }

        .bi-27 {
            animation: lamp-1 .001s forwards linear 2.74s;
        }

        .bi-28 {
            animation: lamp-1 .001s forwards linear 2.76s;
        }

        .bi-29 {
            animation: lamp-1 .001s forwards linear 2.77s;
        }

        .bi-30 {
            animation: lamp-1 .001s forwards linear 2.78s;
        }

        .bi-31 {
            animation: lamp-1 .001s forwards linear 2.79s;
        }

        .bi-32 {
            animation: lamp-1 .001s forwards linear 2.80s;
        }

        .bi-33 {
            animation: lamp-1 .001s forwards linear 2.81s;
        }

        .bi-34 {
            animation: lamp-1 .001s forwards linear 2.82s;
        }

        .bi-35 {
            animation: lamp-1 .001s forwards linear 2.83s;
        }

        .bi-36 {
            animation: lamp-1 .001s forwards linear 2.84s;
        }

        .bi-37 {
            animation: lamp-1 .001s forwards linear 2.85s;
        }

        .bi-38 {
            animation: lamp-1 .001s forwards linear 2.86s;
        }

        .bi-39 {
            animation: lamp-1 .001s forwards linear 2.87s;
        }

        .bi-40 {
            animation: lamp-1 .001s forwards linear 2.88s;
        }

        .bi-41 {
            animation: lamp-1 .001s forwards linear 2.89s;
        }

        .bi-42 {
            animation: lamp-1 .001s forwards linear 2.9s;
        }

        .bi-43 {
            animation: lamp-1 .001s forwards linear 2.91s;
        }

        .bi-44 {
            animation: lamp-1 .001s forwards linear 2.92s;
        }

        .bi-45 {
            animation: lamp-1 .001s forwards linear 2.93s;
        }

        .bi-46 {
            animation: lamp-1 .001s forwards linear 2.94s;
        }

        .bi-47 {
            animation: lamp-1 .001s forwards linear 2.95s;
        }

        .bi-48 {
            animation: lamp-1 .001s forwards linear 2.96s;
        }

        .bi-49 {
            animation: lamp-1 .001s forwards linear 2.97s;
        }

        .bi-50 {
            animation: lamp-1 .001s forwards linear 2.98s;
        }

        .bi-51 {
            animation: lamp-1 .001s forwards linear 3s;
        }

        @keyframes lamp-1 {
            100% {
                opacity: 1;
            }
        }

        .ba-1 {
            animation: lamp-1 .001s forwards linear .5s;
        }

        .ba-2 {
            animation: lamp-1 .001s forwards linear .8s;
        }

        .ba-3 {
            animation: lamp-1 .001s forwards linear 1s;
        }

        .ba-4 {
            animation: lamp-1 .001s forwards linear 1.2s;
        }

        .ba-5 {
            animation: lamp-1 .001s forwards linear 1.4s;
        }

        .ba-6 {
            animation: lamp-1 .001s forwards linear 1.3s;
        }

        .ba-7 {
            animation: lamp-1 .001s forwards linear 1.4s;
        }

        .ba-8 {
            animation: lamp-1 .001s forwards linear 1.5s;
        }

        .ba-9 {
            animation: lamp-1 .001s forwards linear 1.6s;
        }

        .ba-10 {
            animation: lamp-1 .001s forwards linear 1.7s;
        }

        .ba-11 {
            animation: lamp-1 .001s forwards linear 1.8s;
        }

        .ba-12 {
            animation: lamp-1 .001s forwards linear 1.9s;
        }

        .ba-13 {
            animation: lamp-1 .001s forwards linear 2s;
        }

        .ba-14 {
            animation: lamp-1 .001s forwards linear 2.1s;
        }

        .ba-15 {
            animation: lamp-1 .001s forwards linear 2.2s;
        }

        .ba-16 {
            animation: lamp-1 .001s forwards linear 2.3s;
        }

        .ba-17 {
            animation: lamp-1 .001s forwards linear 2.4s;
        }

        .ba-18 {
            animation: lamp-1 .001s forwards linear 2.5s;
        }

        .ba-19 {
            animation: lamp-1 .001s forwards linear 2.6s;
        }

        .ba-20 {
            animation: lamp-1 .001s forwards linear 2.7s;
        }

        .b-2 {
            position: absolute;
            height: 300px;
            width: 90px;
            top: 237px;
            left: 380px;
            background: #001845;
            border: 2px #ffe66d solid;
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
            z-index: 0;
        }

        .l-1 {
            position: absolute;
            height: 300px;
            width: 3px;

            left: 5px;
        }

        .l-2 {
            position: absolute;
            height: 300px;
            width: 3px;
            background: linear-gradient(to top, #4cc9f0, #f72585);
            left: 15px;
        }

        .l-3 {
            position: absolute;
            height: 300px;
            width: 3px;
            background: #ffe66d;
            left: 25px;
        }

        .l-4 {
            position: absolute;
            height: 300px;
            width: 3px;
            background: linear-gradient(to top, #4cc9f0, #f72585);
            left: 35px;
        }

        .l-5 {
            position: absolute;
            height: 300px;
            width: 3px;
            background: linear-gradient(to top, #4cc9f0, #f72585);
            left: 45px;
        }

        .l-6 {
            position: absolute;
            height: 300px;
            width: 3px;
            background: linear-gradient(to top, #4cc9f0, #f72585);
            left: 55px;
        }

        .l-7 {
            position: absolute;
            height: 300px;
            width: 3px;
            background: linear-gradient(to top, #4cc9f0, #f72585);
            left: 65px;
        }

        .l-8 {
            position: absolute;
            height: 300px;
            width: 3px;
            background: linear-gradient(to top, #4cc9f0, #f72585);
            left: 75px;
        }

        .l-9 {
            position: absolute;
            height: 300px;
            width: 3px;
            background: linear-gradient(to top, #4cc9f0, #f72585);
            left: 85px;
        }

        .floor {
            position: absolute;
            height: 3px;
            width: 90px;
            background: #ffe66d;
            top: 60px;
            left: 0px;
            box-shadow: 0px 60px 0px #ffe66d,
                0px 120px 0px #ffe66d,
                0px 180px 0px #ffe66d;
        }

        .floor::before {
            content: "";
            position: absolute;
            height: 3px;
            width: 35px;
            top: 20px;
            left: 10px;
            background: #ffe66d;
            box-shadow: 15px 15px 0px #ffe66d,
                0px 125px 0px #ffe66d,
                15px 145px 0px #ffe66d;
        }

        .floor::after {
            content: "";
            position: absolute;
            height: 3px;
            width: 25px;
            top: -20px;
            right: 10px;
            background: #ffe66d;
            box-shadow: -25px -25px #ffe66d,
                -15px 105px #ffe66d;
        }


        .b-3 {
            position: absolute;
            height: 100px;
            width: 170px;
            top: 438px;
            left: 135px;
            background: linear-gradient(to top, #168aad, 40%, #001845);
            border: 4px #fff3b0 solid;
            border-color: #fff3b0 transparent transparent transparent;
            -webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .blc-1 {
            position: absolute;
            height: 121px;
            width: 70px;
            background: linear-gradient(to top, #168aad, 40%, #001845);
            top: -20px;
            left: -70px;
            box-shadow: 0px -4px 0px #ffe66d;
            -webkit-box-reflect: below -5px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .blc-1::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 125px;
            top: -4px;
            left: -20px;
            background: linear-gradient(to bottom, #fff3b0, #72efdd);
            -webkit-box-reflect: below -5px linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
        }

        .blc-1::after {
            content: "";
            position: absolute;
            width: 70px;
            height: 5px;
            top: -4px;
            background: #fff3b0;
            -webkit-box-reflect: below 235px linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
        }

        .blc-2 {
            position: absolute;
            height: 120px;
            width: 70px;
            background: linear-gradient(to top, #168aad, 40%, #001845);
            top: -20px;
            right: -70px;
            box-shadow: 0px -4px 0px #ffe66d;
            -webkit-box-reflect: below -5px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .blc-2::after {
            content: "";
            position: absolute;
            width: 70px;
            height: 5px;
            top: -4px;
            background: #fff3b0;
            -webkit-box-reflect: below 232px linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
        }

        .line-center {
            position: absolute;
            height: 100px;
            width: 15px;
            background: #001845;
            right: 45%;
        }

        .line-left {
            position: absolute;
            height: 120px;
            width: 15px;
            background: #001845;
            right: 40%;
        }

        .line-right {
            position: absolute;
            height: 120px;
            width: 15px;
            background: #001845;
            right: 40%;
        }

        .w-3 {
            position: absolute;
            height: 5px;
            width: 10px;
            top: 10px;
            left: 5px;
            background: #ffd60a;
            box-shadow: 15px 0px 0px #ffd60a, 15px 0px 0px #ffd60a, 30px 0px 0px #ffd60a,
                60px 0px 0px #ffd60a, 30px 15px 0px #ffd60a, 15px 15px 0px #ffd60a,
                60px 15px 0px #ffd60a, 0px 30px 0px #ffd60a, 15px 30px 0px #ffd60a,
                30px 30px 0px #ffd60a,
                60px 30px 0px #ffd60a,
                60px 60px 0px #ffd60a,
                60px 70px 0px #ffd60a,
                60px 75px 0px #ffd60a,
                60px 80px 0px #ffd60a,
                60px 82px 0px #ffd60a,
                30px 60px 0px #ffd60a,
                30px 75px 0px #ffd60a,
                15px 60px 0px #ffd60a,
                15px 75px 0px #ffd60a,
                0px 60px 0px #ffd60a,
                0px 75px 0px #ffd60a,
                0px 45px 0px #ffd60a,
                95px 0px 0px #ffd60a,
                95px 15px 0px #ffd60a,
                95px 45px 0px #ffd60a,
                95px 60px 0px #ffd60a, 95px 75px 0px #ffd60a,
                110px 15px 0px #ffd60a,
                110px 0px 0px #ffd60a,
                110px 45px 0px #ffd60a,
                110px 60px 0px #ffd60a,
                110px 75px 0px #ffd60a,
                125px 0px 0px #ffd60a,
                125px 15px 0px #ffd60a,
                125px 45px 0px #ffd60a,
                125px 75px 0px #ffd60a,
                140px 0px 0px #ffd60a,
                140px 15px 0px #ffd60a,
                140px 30px 0px #ffd60a,
                140px 45px 0px #ffd60a,
                140px 60px 0px #ffd60a,
                140px 75px 0px #ffd60a,
                95px 70px 0px #ffd60a,
                95px 75px 0px #ffd60a,
                95px 80px 0px #ffd60a,
                95px 82px 0px #ffd60a;
        }

        .wblc1 {
            position: absolute;
            height: 5px;
            width: 10px;
            top: 13px;
            left: 9px;
            background: #ffd60a;
            box-shadow: 0px 15px 0px #ffd60a,
                0px 30px 0px #ffd60a,
                0px 45px 0px #ffd60a,
                0px 75px 0px #ffd60a,
                0px 87px 0px #ffd60a,
                0px 92px 0px #ffd60a,
                0px 97px 0px #ffd60a,
                0px 99px 0px #ffd60a,
                42px 0px 0px #ffd60a,
                42px 60px 0px #ffd60a,
                42px 30px 0px #ffd60a,
                42px 45px 0px #ffd60a,
                42px 75px 0px #ffd60a,
                42px 87px 0px #ffd60a,
                42px 92px 0px #ffd60a,
                42px 97px 0px #ffd60a,
                42px 99px 0px #ffd60a;
        }

        .wblc2 {
            position: absolute;
            height: 5px;
            width: 10px;
            top: 13px;
            left: 9px;
            background: #ffd60a;
            box-shadow: 0px 60px 0px #ffd60a,
                0px 30px 0px #ffd60a,
                0px 45px 0px #ffd60a,
                0px 75px 0px #ffd60a,
                0px 87px 0px #ffd60a,
                0px 92px 0px #ffd60a,
                0px 97px 0px #ffd60a,
                0px 99px 0px #ffd60a,
                42px 15px 0px #ffd60a,
                42px 60px 0px #ffd60a,
                42px 30px 0px #ffd60a,
                42px 45px 0px #ffd60a,
                42px 75px 0px #ffd60a,
                42px 87px 0px #ffd60a,
                42px 92px 0px #ffd60a,
                42px 97px 0px #ffd60a,
                42px 99px 0px #ffd60a;
        }

        .b-4 {
            position: absolute;
            height: 220px;
            width: 90px;
            top: 319px;
            left: 481px;
            background: linear-gradient(to bottom, #240046, 1%, #3c096c, 75%, #ff4d6d);
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .line-4 {
            position: absolute;
            width: 4px;
            height: 200px;
            background: linear-gradient(to bottom, #001845, #3c096c, #c9184a);
            top: 20px;
            left: -14px;
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .b-4::before {
            content: "";
            position: absolute;
            height: 220px;
            width: 25px;
            left: -25px;
            background: linear-gradient(to bottom, #ffbe0b, 2%, #f72585, 2%, #f72585, 70%, #ffe66d);
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .b-4::after {
            content: "";
            position: absolute;
            width: 90px;
            height: 5px;
            background: #4ecdc4;
            -webkit-box-reflect: below 430px linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
        }

        .w-4 {
            position: absolute;
            height: 6px;
            width: 18px;
            top: 15px;
            left: 10px;
            background: #4ecdc4;
            box-shadow: 25px 0px 0px #4ecdc4,
                50px 0px 0px #4ecdc4,
                0px 15px 0px #4ecdc4,
                25px 15px 0px #4ecdc4,
                0px 30px 0px #4ecdc4,
                25px 30px 0px #4ecdc4,
                50px 30px 0px #4ecdc4,
                0px 45px 0px #4ecdc4,
                25px 45px 0px #4ecdc4,
                50px 45px 0px #4ecdc4,
                0px 60px 0px #4ecdc4,
                50px 60px 0px #4ecdc4,
                0px 75px 0px #4ecdc4,
                50px 75px 0px #4ecdc4,
                0px 90px 0px #4ecdc4,
                25px 90px 0px #4ecdc4,
                50px 90px 0px #4ecdc4,
                0px 105px 0px #4ecdc4,
                25px 105px 0px #4ecdc4,
                50px 105px 0px #4ecdc4,
                0px 120px 0px #4ecdc4,
                25px 120px 0px #4ecdc4,
                50px 120px 0px #4ecdc4,
                0px 135px 0px #4ecdc4,
                25px 135px 0px #4ecdc4,
                50px 135px 0px #4ecdc4,
                0px 150px 0px #4ecdc4,
                50px 150px 0px #4ecdc4,
                0px 165px 0px #4ecdc4,
                50px 165px 0px #4ecdc4,
                0px 180px 0px #4ecdc4,
                25px 180px 0px #4ecdc4,
                50px 180px 0px #4ecdc4,
                25px 195px 0px #4ecdc4,
                50px 195px 0px #4ecdc4;
        }

        .b-5 {
            position: absolute;
            height: 180px;
            width: 80px;
            top: 359px;
            left: 591px;
            background: linear-gradient(to bottom, #7b2cbf, #d100d1, #ff4d6d);
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .line-5 {
            position: absolute;
            width: 4px;
            height: 160px;
            background: linear-gradient(to bottom, #001845, #3c096c, #c9184a);
            top: 20px;
            left: -12px;
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .b-5::before {
            content: "";
            position: absolute;
            height: 180px;
            width: 19px;
            left: -19px;
            background: linear-gradient(to bottom, #ffbe0b, 3%, #f72585, 2%, #f72585, 70%, #ffe66d);
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .b-5::after {
            content: "";
            position: absolute;
            width: 80px;
            height: 5px;
            background: #4ecdc4;
            -webkit-box-reflect: below 430px linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
        }

        .w-5 {
            position: absolute;
            height: 5px;
            width: 17px;
            top: 15px;
            left: 6px;
            background: #4ecdc4;
            box-shadow: 25px 0px #4ecdc4,
                50px 0px #4ecdc4,
                0px 15px #4ecdc4,
                25px 15px #4ecdc4,
                0px 30px #4ecdc4,
                25px 30px #4ecdc4,
                50px 30px #4ecdc4,
                0px 45px #4ecdc4,
                25px 45px #4ecdc4,
                50px 45px #4ecdc4,
                0px 60px #4ecdc4,
                50px 60px #4ecdc4,
                0px 75px #4ecdc4,
                50px 75px #4ecdc4,
                0px 90px #4ecdc4,
                25px 90px #4ecdc4,
                50px 90px #4ecdc4,
                0px 105px #4ecdc4,
                25px 105px #4ecdc4,
                50px 105px #4ecdc4,
                0px 120px #4ecdc4,
                50px 120px #4ecdc4,
                0px 135px #4ecdc4,
                25px 135px #4ecdc4,
                50px 135px #4ecdc4,
                25px 150px #4ecdc4,
                50px 150px #4ecdc4;
        }

        .b-6 {
            position: absolute;
            height: 360px;
            width: 80px;
            top: 174px;
            left: 671px;
            border: 4px #ffe66d solid;
            border-color: #ffe66d #ffe66d transparent transparent;
            background: linear-gradient(to bottom, #001845, #023e7d, 75%, #e500a4);
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
        }

        .b-6::before {
            content: "";
            position: absolute;
            width: 10px;
            height: 364px;
            background: linear-gradient(to bottom, #ffe66d, 1.5%, #f72585, 0%, #f72585, 70%, #ffe66d);
            top: -4px;
            left: -4px;
        }

        .signal-line {
            position: absolute;
            width: 5px;
            height: 40px;
            top: -45px;
            left: 37px;
            background: black;
            border-radius: 100%/12.5%;
        }

        .signal-line::before {
            content: "";
            position: absolute;
            height: 8px;
            width: 8px;
            left: -1px;
            border-radius: 50%;
            box-shadow: 0px 0px 10px #e63946;
            background: #e63946;
        }

        .w-6 {
            position: absolute;
            height: 9px;
            width: 9px;
            top: 10px;
            left: 15px;
            background: #4ecdc4;
            box-shadow: 15px 0px #4ecdc4,
                30px 0px #4ecdc4,
                45px 0px #4ecdc4,
                0px 15px #4ecdc4,
                30px 15px #4ecdc4,
                45px 15px #4ecdc4,
                30px 30px #4ecdc4,
                0px 30px #4ecdc4,
                15px 30px #4ecdc4,
                45px 30px #4ecdc4,
                0px 45px #4ecdc4,
                15px 45px #4ecdc4,
                0px 60px #4ecdc4,
                15px 60px #4ecdc4,
                30px 60px #4ecdc4,
                45px 60px #4ecdc4,
                0px 75px #4ecdc4,
                15px 75px #4ecdc4,
                30px 75px #4ecdc4,
                45px 75px #4ecdc4,
                15px 90px #4ecdc4,
                30px 90px #4ecdc4,
                45px 90px #4ecdc4,
                0px 105px #4ecdc4,
                15px 105px #4ecdc4,
                30px 105px #4ecdc4,
                45px 105px #4ecdc4,
                0px 120px #4ecdc4,
                15px 120px #4ecdc4,
                30px 120px #4ecdc4,
                45px 120px #4ecdc4,
                0px 135px #4ecdc4,
                30px 135px #4ecdc4,
                45px 135px #4ecdc4,
                0px 150px #4ecdc4,
                15px 150px #4ecdc4,
                30px 150px #4ecdc4,
                45px 150px #4ecdc4,
                0px 165px #4ecdc4,
                15px 165px #4ecdc4,
                30px 165px #4ecdc4,
                45px 165px #4ecdc4,
                0px 180px #4ecdc4,
                15px 180px #4ecdc4,
                30px 180px #4ecdc4,
                0px 195px #4ecdc4,
                15px 195px #4ecdc4,
                30px 195px #4ecdc4,
                45px 195px #4ecdc4,
                0px 210px #4ecdc4,
                15px 210px #4ecdc4,
                30px 210px #4ecdc4,
                45px 210px #4ecdc4,
                0px 225px #4ecdc4,
                15px 225px #4ecdc4,
                0px 240px #4ecdc4,
                30px 240px #4ecdc4,
                0px 255px #4ecdc4,
                15px 255px #4ecdc4,
                30px 255px #4ecdc4,
                45px 255px #4ecdc4,
                0px 270px #4ecdc4,
                15px 270px #4ecdc4,
                45px 270px #4ecdc4,
                0px 285px #4ecdc4,
                45px 285px #4ecdc4,
                0px 300px #4ecdc4,
                15px 300px #4ecdc4,
                30px 300px #4ecdc4,
                45px 300px #4ecdc4,
                0px 315px #4ecdc4,
                15px 315px #4ecdc4,
                30px 315px #4ecdc4,
                45px 315px #4ecdc4,
                0px 330px #4ecdc4,
                30px 330px #4ecdc4,
                45px 330px #4ecdc4;
        }

        .b-7 {
            position: absolute;
            height: 300px;
            width: 130px;
            top: 239px;
            left: 759px;
            background: linear-gradient(to top, #168aad, 40%, #001845);
            -webkit-box-reflect: below -5px linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
        }

        .b-7::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 300px;
            right: 0px;
            background: linear-gradient(to bottom, #fff3b0, #72efdd);
            -webkit-box-reflect: below -5px linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
        }

        .b-7::after {
            content: "";
            position: absolute;
            width: 110px;
            height: 6px;
            left: 0px;
            background: #fff3b0;
            box-shadow: 0px 40px #fff3b0,
                0px 140px #b9ffb7,
                0px 230px #7ef5cf;
        }

        .w-7 {
            position: absolute;
            height: 6px;
            width: 6px;
            top: 60px;
            left: 15px;
            background: #4ecdc4;

            /* col-1 */
            box-shadow: -10px 10px #4ecdc4,
                0px 20px #4ecdc4,
                -10px 20px #4ecdc4,
                0px 30px #4ecdc4,
                -10px 30px #4ecdc4,
                -10px 40px #4ecdc4,
                0px 50px #4ecdc4,
                -10px 50px #4ecdc4,
                0px 60px #4ecdc4,
                -10px 60px #4ecdc4,

                /* col-2 */
                30px 0px #4ecdc4,
                40px 0px #4ecdc4,
                30px 10px #4ecdc4,
                30px 20px #4ecdc4,
                40px 20px #4ecdc4,
                40px 30px #4ecdc4,
                30px 30px #4ecdc4,
                30px 40px #4ecdc4,
                40px 40px #4ecdc4,
                30px 50px #4ecdc4,
                40px 50px #4ecdc4,
                40px 60px #4ecdc4,

                /* col-3 */
                70px 0px #4ecdc4,
                80px 0px #4ecdc4,
                80px 10px #4ecdc4,
                70px 10px #4ecdc4,
                70px 20px #4ecdc4,
                80px 20px #4ecdc4,
                70px 40px #4ecdc4,
                80px 40px #4ecdc4,
                70px 50px #4ecdc4,
                70px 60px #4ecdc4,
                80px 60px #4ecdc4,

                /* col-4 */
                0px 100px #4ecdc4,
                -10px 110px #4ecdc4,
                0px 120px #4ecdc4,
                -10px 120px #4ecdc4,
                -10px 130px #4ecdc4,
                0px 130px #4ecdc4,
                0px 140px #4ecdc4,
                -10px 140px #4ecdc4,
                0px 150px #4ecdc4,
                -10px 150px #4ecdc4,

                /* col-5 */
                30px 100px #4ecdc4,
                40px 100px #4ecdc4,
                30px 110px #4ecdc4,
                40px 110px #4ecdc4,
                30px 120px #4ecdc4,
                40px 120px #4ecdc4,
                40px 130px #4ecdc4,
                30px 130px #4ecdc4,
                40px 140px #4ecdc4,
                30px 150px #4ecdc4,
                40px 150px #4ecdc4,

                /* col-6 */
                70px 100px #4ecdc4,
                80px 100px #4ecdc4,
                80px 110px #4ecdc4,
                70px 120px #4ecdc4,
                80px 120px #4ecdc4,
                70px 130px #4ecdc4,
                70px 140px #4ecdc4,
                80px 140px #4ecdc4,
                70px 150px #4ecdc4,
                80px 150px #4ecdc4;
        }

        .boat-img-box {
            position: absolute;
            z-index: 2;
            user-select: none;
        }

        .boat-img {
            -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
        }

        .boat-img-box:hover {
            animation-play-state: paused;
        }

        .img-1 {
            animation: moveShip 80s infinite linear;
            animation-delay: 35s;
            z-index: 5;
            top: 670px;
            left: -150px;
        }

        .img-1 img {
            height: 60px;
            width: 120px;
        }

        .img-2 {
            top: 570px;
            left: -100px;
            z-index: 3;
            animation: moveShip 38s infinite linear;
        }

        .img-2 img {
            height: 40px;
            width: 80px;
        }

        .img-3 {
            top: 600px;
            right: -120px;
            transform: rotateY(180deg);
            animation: moveShip-2 55s infinite linear;
            animation-delay: 15s;
            z-index: 4;
        }

        .img-3 img {
            height: 50px;
            width: 100px;
        }

        .img-4 {
            top: 550px;
            right: -100px;
            transform: rotateY(180deg);
            animation: moveShip-2 70s infinite linear;
            animation-delay: 25s;
            z-index: 2;
        }


        .img-4 img {
            height: 30px;
            width: 60px;
        }


        .img-5 {
            top: 700px;
            left: -160px;
            animation: moveShip 43s infinite linear;
            animation-delay: 7s;
            z-index: 6;
        }

        .img-5 img {
            height: 70px;
            width: 140px;
        }

        @keyframes moveShip {
            100% {
                left: 100vw;
            }
        }

        @keyframes moveShip-2 {
            100% {
                right: 100vw;
            }
        }

        .s-1 {
            position: absolute;
            width: 4px;
            height: 20px;
            top: 100px;
            left: 250px;
            background: #edddd4;
            border-radius: 60%/60%;
            box-shadow: 0px 0px 7px #edddd4;
        }

        .move-s1 {
            animation: move-s1 4s linear infinite;
        }

        .move-s2 {
            animation: move-s2 5s linear infinite;
        }

        .move-s3 {
            animation: move-s3 5s linear infinite;
        }

        .move-s4 {
            animation: move-s1 5s linear infinite;
        }

        .move-s5 {
            animation: move-s2 6s linear infinite;
        }

        .move-s6 {
            animation: move-s3 6s linear infinite;
        }

        .move-s7 {
            animation: move-s1 3s linear infinite;
        }

        .move-s8 {
            animation: move-s2 4s linear infinite;
        }

        .move-s9 {
            animation: move-s3 4s linear infinite;
        }

        @keyframes move-s1 {
            0% {
                opacity: 1;
            }

            40% {
                opacity: 1;
            }

            60% {
                opacity: 0;
            }

            70% {
                opacity: 1;
            }
        }

        @keyframes move-s2 {
            0% {
                opacity: 1;
            }

            20% {
                transform: translateY(0);
                opacity: 1;
            }

            40% {
                transform: translateY(4px);
                opacity: 0;
            }

            70% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes move-s3 {
            0% {
                opacity: 1;
            }

            40% {
                transform: translateY(0);
                opacity: 1;
            }

            60% {
                transform: translateY(-4px);
                opacity: 0;
            }

            90% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .s-1::before {
            content: "";
            position: absolute;
            width: 4px;
            height: 20px;
            background: #edddd4;
            border-radius: 60%/60%;
            transform: rotate(90deg);
            box-shadow: 0px 0px 7px #edddd4;
        }

        .s-2 {
            position: absolute;
            width: 2px;
            height: 10px;
            top: 70px;
            left: 170px;
            background: #3a86ff;
            border-radius: 60%/60%;
            box-shadow: 0px 0px 7px #3a86ff;
        }

        .s-2::before {
            content: "";
            position: absolute;
            width: 2px;
            height: 10px;
            background: #3a86ff;
            border-radius: 60%/60%;
            transform: rotate(90deg);
            box-shadow: 0px 0px 7px #3a86ff;
        }

        .s-3 {
            position: absolute;
            width: 2px;
            height: 10px;
            top: 100px;
            left: 450px;
            background: #ff006e;
            border-radius: 60%/60%;
            box-shadow: 0px 0px 7px #ff006e;
        }

        .s-3::before {
            content: "";
            position: absolute;
            width: 2px;
            height: 10px;
            background: #ff006e;
            border-radius: 60%/60%;
            transform: rotate(90deg);
            box-shadow: 0px 0px 7px #ff006e;
        }

        .s-4 {
            position: absolute;
            width: 2px;
            height: 10px;
            top: 250px;
            left: 350px;
            background: #3a86ff;
            border-radius: 60%/60%;
            box-shadow: 0px 0px 7px #3a86ff;
        }

        .s-4::before {
            content: "";
            position: absolute;
            width: 2px;
            height: 10px;
            background: #3a86ff;
            border-radius: 60%/60%;
            transform: rotate(90deg);
            box-shadow: 0px 0px 7px #3a86ff;
        }

        .s-5 {
            position: absolute;
            width: 2px;
            height: 10px;
            top: 200px;
            left: 200px;
            background: #ff006e;
            border-radius: 60%/60%;
            box-shadow: 0px 0px 7px #ff006e;
        }

        .s-5::before {
            content: "";
            position: absolute;
            width: 2px;
            height: 10px;
            background: #ff006e;
            border-radius: 60%/60%;
            transform: rotate(90deg);
            box-shadow: 0px 0px 7px #ff006e;
        }

        .s-6 {
            position: absolute;
            width: 2px;
            height: 10px;
            top: 200px;
            left: 600px;
            background: #ff006e;
            border-radius: 60%/60%;
            box-shadow: 0px 0px 7px #ff006e;
        }

        .s-6::before {
            content: "";
            position: absolute;
            width: 2px;
            height: 10px;
            background: #ff006e;
            border-radius: 60%/60%;
            transform: rotate(90deg);
            box-shadow: 0px 0px 7px #ff006e;
        }

        .s-7 {
            position: absolute;
            width: 2px;
            height: 10px;
            top: 70px;
            left: 600px;
            background: #3a86ff;
            border-radius: 60%/60%;
            box-shadow: 0px 0px 7px #3a86ff;
        }

        .s-7::before {
            content: "";
            position: absolute;
            width: 2px;
            height: 10px;
            background: #3a86ff;
            border-radius: 60%/60%;
            transform: rotate(90deg);
            box-shadow: 0px 0px 7px #3a86ff;
        }

        .s-8 {
            position: absolute;
            width: 2px;
            height: 10px;
            top: 90px;
            left: 850px;
            background: #3a86ff;
            border-radius: 60%/60%;
            box-shadow: 0px 0px 7px #3a86ff;
        }

        .s-8::before {
            content: "";
            position: absolute;
            width: 2px;
            height: 10px;
            background: #3a86ff;
            border-radius: 60%/60%;
            transform: rotate(90deg);
            box-shadow: 0px 0px 7px #3a86ff;
        }

        .s-9 {
            position: absolute;
            width: 2px;
            height: 10px;
            top: 150px;
            left: 60px;
            background: #ff006e;
            border-radius: 60%/60%;
            box-shadow: 0px 0px 7px #ff006e;
        }

        .s-9::before {
            content: "";
            position: absolute;
            width: 2px;
            height: 10px;
            background: #ff006e;
            border-radius: 60%/60%;
            transform: rotate(90deg);
            box-shadow: 0px 0px 7px #ff006e;
        }

        .moon-img {
            position: fixed;
            right: 30px;
            top: 20px;
            width: 80px;
            animation: moon-move 6s infinite;
            user-select: none;
            transform: rotateY(180deg) rotateZ(0);
        }

        @keyframes moon-move {
            0% {
                transform: rotateY(180deg) rotateZ(0);
            }

            10% {
                right: 34px;
                top: 26px;
                transform: rotateY(180deg) rotateZ(10deg);
            }

            20% {
                right: 30px;
                top: 20px;
                transform: rotateY(180deg) rotateZ(0);
            }
        }

        .liuxing-img {
            width: 150px;
            position: fixed;
            top: -300px;
            z-index: -1;
            transform: rotateZ(5deg);
        }

        .liuxing-1 {
            left: 720px;
            animation: liuxing-2 16s infinite ease-in 8.5s;
        }

        .liuxing-2 {
            left: 780px;
            animation: liuxing-3 20s infinite ease-in 10s;
        }

        .liuxing-3 {
            left: 740px;
            animation: liuxing-2 25s infinite ease-in 11s;
        }

        .liuxing-4 {
            left: 700px;
            animation: liuxing-1 20s infinite ease-in 12s;
        }

        .liuxing-5 {
            left: 750px;
            animation: liuxing-3 25s infinite ease-in 12.5s;
        }

        .liuxing-6 {
            left: 650px;
            animation: liuxing-1 22s infinite ease-in 12.9s;
        }

        .liuxing-7 {
            left: 760px;
            animation: liuxing-3 20s infinite ease-in 13.4s;
        }

        .liuxing-8 {
            left: 790px;
            animation: liuxing-4 18s infinite ease-in 13.8s;
        }

        .liuxing-9 {
            left: 740px;
            animation: liuxing-2 20s infinite ease-in 14s;
        }

        .liuxing-10 {
            left: 650px;
            animation: liuxing-1 17s infinite ease-in 14.5s;
        }

        .liuxing-11 {
            left: 820px;
            animation: liuxing-5 25s infinite ease-in 14.9s;
        }

        .liuxing-12 {
            left: 780px;
            animation: liuxing-4 20s infinite ease-in 15.2s;
        }

        .liuxing-13 {
            left: 730px;
            animation: liuxing-2 18s infinite ease-in 15.5s;
        }

        .liuxing-14 {
            left: 780px;
            animation: liuxing-4 25s infinite ease-in 16s;
        }

        .liuxing-15 {
            left: 680px;
            animation: liuxing-1 35s infinite ease-in 16.5s;
        }

        .liuxing-16 {
            left: 750px;
            animation: liuxing-3 30s infinite ease-in 16.9s;
        }

        .liuxing-17 {
            left: 710px;
            animation: liuxing-1 35s infinite ease-in 22.4s;
        }

        .liuxing-18 {
            left: 770px;
            animation: liuxing-4 20s infinite ease-in 23s;
        }

        .liuxing-19 {
            left: 700px;
            animation: liuxing-1 15s infinite ease-in 23.5s;
        }

        .liuxing-20 {
            left: 840px;
            animation: liuxing-5 25s infinite ease-in 23.8s;
        }

        .liuxing-21 {
            left: 730px;
            animation: liuxing-2 28s infinite ease-in 24s;
        }

        .liuxing-22 {
            left: 780px;
            animation: liuxing-4 35s infinite ease-in 24.3s;
        }

        .liuxing-23 {
            left: 750px;
            animation: liuxing-3 26s infinite ease-in 24.5s;
        }

        .liuxing-24 {
            left: 670px;
            animation: liuxing-1 35s infinite ease-in 25s;
        }

        .liuxing-25 {
            left: 800px;
            animation: liuxing-5 30s infinite ease-in 25.6s;
        }

        .liuxing-26 {
            left: 730px;
            animation: liuxing-2 28s infinite ease-in 26.1s;
        }

        .liuxing-27 {
            left: 770px;
            animation: liuxing-4 24s infinite ease-in 26.7s;
        }

        .liuxing-28 {
            left: 710px;
            animation: liuxing-1 30s infinite ease-in 27.5s;
        }

        .liuxing-29 {
            left: 640px;
            animation: liuxing-1 20s infinite ease-in 23.3s;
        }

        .liuxing-30 {
            left: 760px;
            animation: liuxing-3 24s infinite ease-in 24s;
        }

        @keyframes liuxing-1 {
            10% {
                opacity: 1;
            }

            15% {
                left: -100px;
                top: 190px;
                /* width: 200px; */
                opacity: 0;
            }

            99.99% {
                left: -100px;
                top: 190px;
                /* width: 200px; */
                opacity: 0;
            }
        }

        @keyframes liuxing-2 {
            10% {
                opacity: 1;
            }

            15% {
                left: -100px;
                top: 210px;
                /* width: 200px; */
                opacity: 0;
            }

            99.99% {
                left: -100px;
                top: 210px;
                /* width: 200px; */
                opacity: 0;
            }
        }

        @keyframes liuxing-3 {
            10% {
                opacity: 1;
            }

            15% {
                left: -100px;
                top: 230px;
                /* width: 200px; */
                opacity: 0;
            }

            99.99% {
                left: -100px;
                top: 230px;
                /* width: 200px; */
                opacity: 0;
            }
        }

        @keyframes liuxing-4 {
            10% {
                opacity: 1;
            }

            15% {
                left: -100px;
                top: 230px;
                /* width: 200px; */
                opacity: 0;
            }

            99.99% {
                left: -100px;
                top: 230px;
                /* width: 200px; */
                opacity: 0;
            }
        }

        @keyframes liuxing-5 {
            10% {
                opacity: 1;
            }

            15% {
                left: -100px;
                top: 240px;
                /* width: 200px; */
                opacity: 0;
            }

            99.99% {
                left: -100px;
                top: 240px;
                /* width: 200px; */
                opacity: 0;
            }
        }

        .liuxing-31 {
            right: 730px;
            animation: liuxing-6 20s infinite ease-in 10s;
            width: 50px;
            transform: rotateZ(-100deg);
        }

        @keyframes liuxing-6 {
            15% {
                opacity: 1;
            }

            20% {
                right: 240px;
                top: 260px;
                opacity: 0;
            }

            99.99% {
                right: 240px;
                top: 260px;
                opacity: 0;
            }
        }

        .liuxing-32 {
            right: 1000px;
            animation: liuxing-7 22s infinite ease-in 5s;
            width: 50px;
            transform: rotateZ(-90deg);
        }

        @keyframes liuxing-7 {
            15% {
                opacity: 1;
            }

            20% {
                right: 400px;
                top: 400px;
                opacity: 0;
            }

            99.99% {
                right: 400px;
                top: 400px;
                opacity: 0;
            }
        }

        .plane-img {
            position: fixed;
            right: -200px;
            top: 50px;
            animation: plane 100s infinite linear;
            z-index: 5;
        }

        .plane-img img {
            width: 60px;
        }

        .plane-img .rainbow {
            position: relative;
            top: -10px;
        }

        .plane-img:hover .rainbow {
            opacity: 1;
            transform: scale(1);
        }

        @keyframes plane {
            50% {
                right: 100%;
            }

            100% {
                right: 100%;
            }
        }

        iframe {
            position: fixed;
            width: 100vw;
            height: 100vh;
            left: 0;
            top: 0;
            z-index: -2;
            display: none;
        }

        .user-box {
            position: fixed;
            left: 30px;
            top: 30px;
            height: 134px;
            width: 120px;
            animation: user 30s infinite ease-out;
            z-index: 100;
            transition: all .5s;
            opacity: 0;
            transform: scale(0);
        }

        .user-box:hover {
            transform: scale(1.3) !important;
        }

        @keyframes user {
            5% {
                top: 40px;
            }

            10% {
                top: 30px;
            }

            15% {
                top: 40px;
            }

            20% {
                top: 30px;
            }

            25% {
                top: 40px;
            }

            30% {
                top: 30px;
            }

            37% {
                top: 60px;
            }

            44% {
                top: 30px;
            }

            49% {
                top: 40px;
            }

            54% {
                top: 30px;
            }

            59% {
                top: 40px;
            }

            64% {
                top: 30px;
            }

            70% {
                top: 60px;
            }

            75% {
                top: 30px;
            }

            80% {
                top: 40px;
            }

            85% {
                top: 30px;
            }

            90% {
                top: 50px;
            }

            95% {
                top: 30px;
            }

            100% {
                top: 30px;
            }
        }

        .user-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
        }

        .user-img-1 {
            width: 105px;
            position: absolute;
            left: -5px;
            top: 15px;
        }

        .user-img-2 {
            width: 105px;
            position: absolute;
            left: -5px;
            top: 55px;
            animation: user-img 30s infinite ease-out;
        }

        @keyframes user-img {
            5% {
                transform: rotateX(20deg);
            }

            10% {
                transform: rotateX(0);
            }

            15% {
                transform: rotateX(-20deg);
            }

            20% {
                transform: rotateX(0);
            }

            25% {
                transform: rotateX(20deg);
            }

            30% {
                transform: rotateX(0);
            }

            37% {
                transform: rotateX(-20deg);
            }

            44% {
                transform: rotateX(0);
            }

            49% {
                transform: rotateX(20deg);
            }

            54% {
                transform: rotateX(0);
            }

            59% {
                transform: rotateX(-20deg);
            }

            64% {
                transform: rotateX(0);
            }

            70% {
                transform: rotateX(20deg);
            }

            75% {
                transform: rotateX(0);
            }

            80% {
                transform: rotateX(-20deg);
            }

            85% {
                transform: rotateX(0);
            }

            90% {
                transform: rotateX(20deg);
            }

            95% {
                transform: rotateX(0);
            }

            100% {
                transform: rotateX(0);
            }
        }

        #bg {
            position: fixed;
            width: 100vw;
            height: 100vh;
            left: 0;
            top: 0;
            background-color: transparent;
            z-index: -1;
        }

        .rainbow {
            background: linear-gradient(124deg, #fe6001 0, #F4F60C 22%, #84fe01 41%, #01fe84 65%, #0196fe 100%);
            border-radius: 20px;
            transition: all .2s;
            padding: 5px 10px;
            bottom: calc(100% + 10px);
            width: 180px;
            left: -50%;
            opacity: 0;
            transform: scale(0);
            position: absolute;
            word-break: break-all;
            font-size: 14px;
        }

        .boat-img-box:hover .rainbow {
            opacity: 1;
            transform: scale(1);
        }

        .img-3 .rainbow,
        .img-4 .rainbow {
            transform: rotateY(180deg) scale(0);
        }

        .img-3:hover .rainbow,
        .img-4:hover .rainbow {
            opacity: 1;
            transform: rotateY(180deg) scale(1);
        }

        .rainbow::before,
        .rainbow::after {
            border-radius: 20px / 5px;
            content: '';
            display: block;
            position: absolute;
            color: #000;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
            word-wrap: break-word;
        }

        .rainbow::before {
            border-bottom-color: rgba(0, 0, 0, 0.5);
            right: -7px;
            z-index: -2;
            bottom: 0;
        }

        .rainbow::after {
            border-bottom-color: #0196fe;
            right: -5px;
        }
    </style>
</head>

<body>

    <!-- <div class='reflect-line'></div> -->
    <iframe src="./iframe.html" frameborder="0"></iframe>
    <div class='b-1 ba-1 ba-item'>
        <div class='w-1 ba-item bi-1'></div>
    </div>
    <div class='b-3  ba-2 ba-item'>
        <div class='w-3 ba-item bi-2'></div>
        <div class='line-center ba-item bi-3'></div>
        <div class='blc-1 ba-3 ba-item'>
            <div class='wblc1 ba-item bi-4'></div>
            <div class='line-left ba-item bi-5'></div>
        </div>
        <div class='blc-2 ba-4 ba-item'>
            <div class='wblc2 ba-item bi-6'></div>
            <div class='line-right ba-item bi-7'></div>
        </div>
    </div>
    <div class='b-2 ba-5 ba-item'>
        <div class='l-1 ba-item bi-8'></div>
        <div class='l-2 ba-item bi-9'></div>
        <div class='l-3 ba-item bi-10'></div>
        <div class='l-4 ba-item bi-11'></div>
        <div class='l-5 ba-item bi-12'></div>
        <div class='l-6 ba-item bi-13'></div>
        <div class='l-7 ba-item bi-14'></div>
        <div class='l-8 ba-item bi-15'></div>
        <div class='l-9 ba-item bi-16'></div>
        <div class='floor ba-item bi-17'></div>
    </div>
    <div class='b-4 ba-6 ba-item'>
        <div class='line-4 ba-item bi-18'></div>
        <div class='w-4 ba-item bi-19'></div>
    </div>
    <div class='b-5 ba-7 ba-item'>
        <div class='line-5 ba-item bi-20'></div>
        <div class='w-5 ba-item bi-21'></div>
    </div>
    <div class='b-6 ba-8 ba-item'>
        <div class='w-6 ba-item bi-22'></div>
        <div class='signal-line ba-item bi-23'></div>
    </div>
    <div class='b-7 ba-9 ba-item'>
        <div class='w-7 ba-item bi-24'></div>
    </div>
    <div class='b-4 ba-10 ba-item' style="left: 910px;">
        <div class='line-4 ba-item bi-25'></div>
        <div class='w-4 ba-item bi-26'></div>
    </div>
    <div class='b-1 ba-11 ba-item' style="left: 1000px;">
        <div class='w-1 ba-item bi-27'></div>
    </div>
    <div class='b-3 ba-12 ba-item' style="left: 1100px;">
        <div class='w-3 ba-item bi-28'></div>
        <div class='line-center ba-item bi-29'></div>
        <div class='blc-1 ba-13 ba-item'>
            <div class='wblc1 ba-item bi-30'></div>
            <div class='line-left ba-item bi-31'></div>
        </div>
        <div class='blc-2 ba-14 ba-item'>
            <div class='wblc2 ba-item bi-32'></div>
            <div class='line-right ba-item bi-33'></div>
        </div>
    </div>
    <div class='b-7 ba-15 ba-item' style="left: 1342px;">
        <div class='w-7 ba-item bi-34'></div>
    </div>
    <div class='b-2 ba-16 ba-item' style="left: 1472px;">
        <div class='l-1 ba-item bi-35'></div>
        <div class='l-2 ba-item bi-36'></div>
        <div class='l-3 ba-item bi-37'></div>
        <div class='l-4 ba-item bi-38'></div>
        <div class='l-5 ba-item bi-39'></div>
        <div class='l-6 ba-item bi-40'></div>
        <div class='l-7 ba-item bi-41'></div>
        <div class='l-8 ba-item bi-42'></div>
        <div class='l-9 ba-item bi-43'></div>
        <div class='floor ba-item bi-44'></div>
    </div>
    <div class='b-6 ba-17 ba-item' style="left: 1567px;">
        <div class='w-6 ba-item bi-45'></div>
        <div class='signal-line ba-item bi-46'></div>
    </div>
    <div class='b-5 ba-18 ba-item' style="left: 1674px;">
        <div class='line-5 ba-item bi-47'></div>
        <div class='w-5 ba-item bi-48'></div>
    </div>
    <div class='b-4 ba-19 ba-item' style="left: 1780px;">
        <div class='line-4 ba-item bi-49'></div>
        <div class='w-4 ba-item bi-50'></div>
    </div>
    <div class='b-1 ba-20 ba-item' style="left: 1870px;">
        <div class='w-1 ba-item bi-51'></div>
    </div>
    <div class='boat'>
        <div class="boat-img-box img-1">
            <div class="bubble bubble-alt rainbow">

            </div>
            <img class="boat-img" src="./imgs/boat-1.png" alt="boat" border="0">
        </div>
        <div class="boat-img-box img-2">
            <div class="bubble bubble-alt rainbow">

            </div>
            <img class="boat-img" src="./imgs/boat-2.png" alt="boat" border="0">
        </div>
        <div class="boat-img-box img-3">
            <div class="bubble bubble-alt rainbow">

            </div>
            <img class="boat-img" src="./imgs/boat-3.png" alt="boat" border="0">
        </div>
        <div class="boat-img-box img-4">
            <div class="bubble bubble-alt rainbow">

            </div>
            <img class="boat-img" src="./imgs/boat-4.png" alt="boat" border="0">
        </div>
        <div class="boat-img-box img-5">
            <div class="bubble bubble-alt rainbow">

            </div>
            <img class="boat-img" src="./imgs/boat-5.png" alt="boat" border="0">
        </div>
    </div>
    <div class='s-1 move-s9'></div>
    <div class='s-2 move-s7'></div>
    <div class='s-3 move-s8'></div>
    <div class='s-4 move-s4' style="left: 300px;top: 240px;"></div>
    <div class='s-5 move-s8'></div>
    <div class='s-6 move-s6'></div>
    <div class='s-7 move-s3'></div>
    <div class='s-8 move-s6' style="top:150px"></div>
    <div class='s-9 move-s1'></div>
    <div class='s-1 move-s2' style="left: 460px;top: 180px;"></div>
    <div class='s-2 move-s8' style="left: 1500px;top: 100px;"></div>
    <div class='s-3 move-s9' style="left: 1590px;top: 50px;"></div>
    <div class='s-4 move-s4' style="left: 800px;top: 40px;"></div>
    <div class='s-5 move-s5' style="left: 1350px;top: 100px;"></div>
    <div class='s-6 move-s7' style="left: 1000px;top: 150px;"></div>
    <div class='s-7 move-s1' style="left: 1100px;top: 60px;"></div>
    <div class='s-8 move-s2' style="left: 1800px;top: 150px;"></div>
    <div class='s-9 move-s3' style="left: 1200px;top: 160px;"></div>
    <div class='s-1 move-s4' style="left: 1200px;top: 40px;"></div>
    <div class='s-1 move-s5' style="left: 1700px;top: 100px;"></div>
    <div class='s-1 move-s6' style="left: 1100px;top: 210px;"></div>
    <img class="moon-img" src="./imgs/moon.png" alt="">
    <img class="liuxing-img liuxing-1" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-2" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-3" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-4" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-5" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-6" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-7" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-8" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-9" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-10" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-11" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-12" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-13" src="./imgs/liuxing-2.png" alt="">
    <!-- <img class="liuxing-img liuxing-14" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-15" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-16" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-17" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-18" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-19" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-20" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-21" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-22" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-23" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-24" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-25" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-26" src="./imgs/liuxing-2.png" alt=""> -->
    <!-- <img class="liuxing-img liuxing-27" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-28" src="./imgs/liuxing-2.png" alt=""> -->
    <img class="liuxing-img liuxing-29" src="./imgs/liuxing-2.png" alt="">
    <img class="liuxing-img liuxing-30" src="./imgs/liuxing-2.png" alt="">


    <img class="liuxing-img liuxing-31" src="./imgs/liuxing-3.png" alt="">
    <img class="liuxing-img liuxing-32" src="./imgs/liuxing-3.png" alt="">

    <div class="plane-img">
        <img src="./imgs/plane.png" alt="">
        <div class="bubble bubble-alt rainbow">
            哒哒哒哒哒哒哒哒哒哒~~~
        </div>
    </div>

    <div class="user-box" id="user-box">
        <img class="user-bg" src="./imgs/paopao.png" alt="">
        <img class="user-img-1" src="./imgs/user-1.png" alt="">
        <img class="user-img-2" src="./imgs/user-2.png" alt="">
    </div>

    <div id="bg"></div>

    <script src="./js/ripple-min.js"></script>
    <script>
        window.onload = () => {
            function RandomNumBoth(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            const msgList = [
                [
                    '希望你今天开心，明天开心，后天也开心',
                    '水能载舟，亦能覆舟',
                    '看！有流星！',
                    '两岸猿声啼不住，轻舟已过万重山',
                    '小船儿推开波浪~~',
                    '好美的烟花~~',
                    '生活不只有眼前的枸杞，还有炸鸡，炸串和啤酒',
                    '今晚月色真好 想吃麦辣鸡腿堡',
                    '月亮不睡我不睡，我是秃头小宝贝',
                    '心理学上有潜意识激励的说法，例如你每天早上出门前对着镜子说一句“你很棒”。一段时间后，那块镜子就会成为一块很棒的镜子',
                    '所有人都在问你飞的高不高，只有亲人会关心你飞的累不累，而我在想你为什么会飞',
                    '你说的对，但是你不好好吃饭的话，会让爱你的人担心哦',
                    '看见你，我会情不自禁地微笑',
                    '没什么才艺，跳段街舞吧 ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ',
                    '我溺…水了…Ｏｏ゜゜○。○゜。Ｏ°ｏ○。ｏ゜○。゜Ｏ○。°゜Ｏ○。°○ｏ°○ｏ○゜ｏ。Ｏ゜○。゜。゜○。○゜。Ｏ°ｏ救命…ｏ゜○。゜°○ｏ°○ｏ○゜ｏＯ゜○。°ｏ○。ｏ゜○。゜Ｏ○Ｏ○。°○ｏ°○ｏ○咕噜咕噜゜ｏ。Ｏ゜○。゜。゜○。○゜。Ｏ°ｏ○。ｏ゜゜○。○゜。Ｏ°ｏ○。ｏ゜○。゜Ｏ○。°゜Ｏ○。°○ｏ°○ｏ○゜ｏ。Ｏ゜○。゜。゜○。○゜。Ｏ°ｏ○。ｏ゜゜有........没有人....救……我……○。○゜゜○。○゜。Ｏ°ｏ○。ｏ゜○。゜○。○゜。Ｏ°ｏ○。ｏ゜゜°○ｏ°○ｏ○゜ｏ。Ｏ゜○。゜。゜○。○゜。Ｏ°ｏ○。ｏ゜゜○。○゜。Ｏ我要…沉下去…了°ｏ○。ｏ゜○。゜Ｏ○。°゜Ｏ○。°○ｏ°○ｏ○゜ｏ。Ｏ゜○。你...再也见不到我了...゜。゜○。○゜。Ｏ°ｏ○。ｏ。○゜。Ｏ°ｏ○。ｏ゜○。゜Ｏ○。°゜Ｏ○。°○ｏ°○ｏ○゜ｏ。Ｏ゜○。゜。゜○。○゜。Ｏ°ｏ○。ｏ',
                    '你可以装傻、真傻，但不能否认我的英俊潇洒',
                    '你们好虚伪，表面一套背后一套，北京一套上海一套...',
                    '长这么大都还没有去过酒吧，也不知道里面有没有我爱喝的娃哈哈',
                    '我在遥望~~月亮之上~~',
                    '希望这里的夜晚能够让你记住我'
                ],
                [
                    '你是天上凤凰飞呀飞，我是地上恶狼追啊追',
                    '有缘千里来相会，二百块钱不算贵',
                    '天涯何处无芳草，八十块钱搞不搞',
                    '如果只是寂寞，请不要说爱我',
                    '祝老板做人不缺爱，做*不缺人',
                    '睡对了就结婚，睡错了叫青春',
                    '风吹裤裆毛飞扬',
                    '当然是选择原来她啦~~',
                    '名花虽有主，我来松松土',
                    '我很丑可是我很持久',
                    '完了，完了，她又不理我了，我变成狗不理了',
                    '至今未敢恋爱，只因台湾孤悬海外',
                    '她说需要点时间和距离，她是要算速度吗',
                    '能够说出的委屈，便不算委屈；能够抢走的爱人，便不算爱人',
                    '葡萄美酒夜光杯，金钱美人一大堆',
                    '想开点，兄弟',
                    '不戴套的感觉真好，只是不安全，因为手机真的不经摔',
                    '第一次紧，第二次疼，第三次舒服，后面慢慢就松了，新鞋子刚穿都是这样，多穿几次就好了',
                    '我黄某与赌毒不共戴天'
                ],
                [
                    '上班苦，上班累，上班就想打瞌睡',
                    '美丽公司我的家，工资永远没得加',
                    '年年打工年年愁，天天加班像只猴',
                    '漫漫人生路，总会错几步',
                    '钻石恒久远，一颗就破产',
                    '船撞桥头自然沉~~',
                    '人生总是大起大落落落落落落落落落落落落...',
                    '左上角好像有个泡泡在跳一跳的',
                    '有钱男子汉，没钱汉子难',
                    '明天的活，明天再干吧，说不定运气好，今天死了明天就不用干了',
                    '世上无难事 只要肯放弃',
                    '既然这么难办那就不办了',
                    '万事开头难，然后中间难，最后结尾难',
                    '我的一生：废物的诞生-莫欺少年穷-莫欺中年穷-莫欺老年穷-死者为大-棺材板的震动-盗墓贼的眼泪',
                    '生死有命，富贵在天',
                    '输在起跑线总比输在终点好，省了一顿跑',
                    '天桥底下盖小被，小被里面抹眼泪，抹完眼泪无所谓，逢人就是啊对对对',
                    '比我优秀的人都比我努力，那我努力有什么用',
                    '做事一定要三思而后行：能不能不做，能不能明天做，能不能交给别人做',
                    '逃避可耻但是有用',
                    '我的人生态度：《不行就算了》《那又怎样》《你说的都对》《不要也行》《那我别活了》',
                    '手里捧着窝窝头，菜里没有一滴油。',
                    '爱笑的人当然运气好啦，因为运气差的都笑不出来',
                    '向生活请个假，今天做个快乐的废物~~',
                    '努力不一定有结果,不努力一定会很舒服',
                    '只要我成为一个废物,就没人能够利用我',
                    '天天上班愁更愁，领导开会无离头',
                    '天天青菜炒黄瓜，无油无盐又多沙',
                    '书到用时方恨少，钱到月底不够花',
                    '只要我不努力，老板就永远过不上他想要的生活'
                ],
                [
                    '没见过UFO哇',
                    '看！左上角有两个人！',
                    '肥家咯肥家咯~~',
                    '什么？只有我一只UFO了？！',
                    '什么？霸王龙没了？！',
                    '看！天上有灰机！',
                    '香菇掉厕所了还能叫香菇吗',
                    '学法律的为什么叫律师不叫法师呢',
                    '被门夹过的核桃，还能补脑吗',
                    '明明有七个国，秦国为什么只灭了六国呢',
                    '人吃猪，猪吃饲料，那我们为什么不直接吃饲料呢',
                    '美国队长被冰封那么多年，会不会得老寒腿？',
                    '等不到公交车能不能用母交车将其吸引过来',
                    '战胜了自己，到底是赢了还是输了',
                    '前列县在哪？听说这个县经常发盐，我想去领些盐',
                    '为什么我带了隐形眼镜却不能隐形',
                    '陨石为什么总是落在陨石坑里',
                    '一天一苹果，医生不找我~~',
                    '变形金刚买保险是买车险还是人险',
                    '午餐肉，我可以晚上吃吗',
                    '秃头的人洗头，用洗头膏还是洗面奶？',
                    '如果猪肾虚，那它的腰子还补吗',
                    '在自首的路上被抓了还算自首吗',
                    '交通基本靠走，通讯基本靠吼，治安基本靠狗，生活基本靠手',
                    '老鼠拿刀，满街找猫；青楼满座，谁懂寂寞',
                    '天生我才必有用，老鼠儿子会打洞',
                    '半夜三更鬼敲门，路上行人欲断魂',
                    '我是谁，我在哪，我在干什么',
                    '如果你肯花一分钟时间了解我，你就会发现，你浪费了一分钟',
                    '外国人笑起来是哈哈哈哈哈哈，还是happy、happy、happy呢',
                    '当你觉得你不行的时候，你可以去马路上，这样你就是行人',
                    '以前总有人骂我丑，我上去就和他们打了起来，从那以后我再也没听到过有人说我丑，因为我被他们打聋了Ｏ○Ｏ',
                    '要不这样，你当我死了吧',
                    '楼下的算命先生真的名不虚传，他居然能算出来我只有一条命'
                ],
                [
                    '光芒越耀眼，人生越苦短。死亦轮回生，生亦无知年',
                    '万物生自守恒，源力破则失正',
                    '鞋子脏是因为你走的路不干净',
                    '希望这不是我们的最后一次见面',
                    '人生至愚是恶闻已过，人生至恶是善谈人过',
                    '不要温和地走进那良夜',
                    '世界上所有不利情况，都是由于当事者能力不足造成的',
                    '我从来不会去骂一个让我不爽的人，一是在我有限的生命里不能浪费在无聊的人身上，二是我骂不过',
                    '我们很乐于去做那些我们擅长的事，于是就会一直去做，最终将使得我们一直只会做擅长的那些事',
                    '千变万化是人心，纹丝不动是命运',
                    '这世上只有一种成功，就是能够用自己喜欢的方式度过一生',
                    '我与春风皆过客，你携秋水揽星河',
                    '本是青灯不归客，却因浊酒留风尘',
                    '欲买桂花同载酒，终不似，少年游',
                    '于高山之巅，方见大河奔涌，于群峰之上，便觉长风浩荡',
                    '生气是拿别人做错的事来惩罚自己'
                ]
            ]

            const boatDoms = [...document.getElementsByClassName('boat-img-box')]
            boatDoms.forEach((dom, index) => {
                dom.onmouseenter = (ev) => {
                    const msgInfo = msgList[index]
                    const msg = msgInfo[RandomNumBoth(0, msgInfo.length - 1)]
                    dom.children[0].innerText = msg
                }
            })



            document.getElementById('user-box').onclick = () => {
                const a = document.createElement('a')
                a.href = 'https://www.hellowxh.com'
                a.target = '_blank'
                a.click()
            }

            const html = document.getElementsByTagName('html')[0]
            rippleEffect('html');
            setTimeout(() => {
                const iframe = document.getElementsByTagName('iframe')[0]
                iframe.style.display = 'block'
            }, 5000);
            setTimeout(() => {
                const userBox = document.getElementsByClassName('user-box')[0]
                userBox.style.opacity = 1
                userBox.style.transform = 'scale(1)'
            }, 12000)

            setTimeout(() => {
                const doms = document.querySelectorAll('.ba-item')
                doms?.forEach(item => {
                    [...item.children].forEach?.(it => {
                        it.style.opacity = 0
                    })
                })
            }, 5000);

            // //==========鼠标星球尾巴js代码============

            // //========函数:获取当前鼠标的坐标=========
            // function getMousePosition(event) {
            //     var x = 0;//x坐标
            //     var y = 0;//y坐标
            //     //documentElement 返回一个文档的文档元素。
            //     doc = document.documentElement;
            //     //body 返回文档的body元素
            //     body = document.body;
            //     //解决兼容性
            //     if (!event) event = window.event;
            //     //解决鼠标滚轮滚动后与相对坐标的差值
            //     //pageYoffset是Netscape特有
            //     if (window.pageYoffset) {
            //         x = window.pageXOffset;
            //         y = window.pageYOffset;
            //     } else {//其他浏览器鼠标滚动
            //         x = (doc && doc.scrollLeft || body && body.scrollLeft || 0)
            //             - (doc && doc.clientLeft || body && body.clientLeft || 0);
            //         y = (doc && doc.scrollTop || body && body.scrollTop || 0)
            //             - (doc && doc.clientTop || body && body.clientTop || 0);
            //     }
            //     //得到的x加上当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标
            //     x += event.clientX;
            //     //得到的x加上当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标
            //     y += event.clientY;
            //     //返回x和y
            //     return { 'x': x, 'y': y };
            // }
            // //========函数:获取当前鼠标的坐标=========

            // //=====生成从minNum到maxNum的随机数=====
            // function randomNum(minNum, maxNum) {
            //     switch (arguments.length) {
            //         case 1:
            //             return parseInt(Math.random() * minNum + 1, 10);
            //         case 2:
            //             return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            //         default:
            //             return 0;
            //     }
            // }
            // //=====生成从minNum到maxNum的随机数======

            // //======给整个文档绑定一个鼠标移动事件======
            // document.onmousemove = function (event) {

            //     // 在页面创建一个标签，（这里是创建一个自定义标签styleImg ）
            //     var styleImg = document.createElement("div");
            //     //获取随机数1-5,根据随机数来设置标签的样式
            //     var r = randomNum(1, 5);
            //     styleImg.innerHTML = "<img src='./imgs/paopao.png' style='width: 20px;height: auto;'/>"
            //     // switch (r) {
            //     //     case 1:
            //     //         //设置图片的路径,根据不同的路径就可以更改成不同的样式
            //     //         styleImg.innerHTML = "<img src='./imgs/mouse-1.png' style='width: 50px;height: auto;'/>"
            //     //         break;
            //     //     case 2:
            //     //         styleImg.innerHTML = "<img src='./imgs/mouse-1.png' style='width: 50px;height: auto;'/>"
            //     //         break;
            //     //     case 3:
            //     //         styleImg.innerHTML = "<img src='./imgs/mouse-1.png' style='width: 50px;height: auto;'/>"
            //     //         break;
            //     //     case 4:
            //     //         styleImg.innerHTML = "<img src='./imgs/mouse-1.png' style='width: 50px;height: auto;'/>"
            //     //         break;
            //     //     case 5:
            //     //         styleImg.innerHTML = "<img src='./imgs/mouse-1.png' style='width: 50px;height: auto;'/>"
            //     //         break;
            //     // }
            //     // 由于要设置动画，设置left 和top，因此，必须要设置定位
            //     styleImg.style.position = 'fixed'
            //     // 设置标签的初始位置，即鼠标的当前位置
            //     var x = getMousePosition(event).x;
            //     var y = getMousePosition(event).y;
            //     // 设置styleImg的坐标
            //     styleImg.style.top = y + "px";
            //     styleImg.style.left = x + "px";
            //     styleImg.style.zIndex = 99
            //     //绑定testDiv为当前鼠标小尾巴生效的区域
            //     var testDiv = document.getElementsByTagName("html")[0];
            //     // 将新建的标签加到页面的 body标签中
            //     testDiv.appendChild(styleImg);
            //     // 在文档中有超出的地方就会不显示，所以尽量绑定到页面的div中
            //     // 设置溢出隐藏，为了防止鼠标在移动的过程中会触发上下滚动条
            //     testDiv.style.overflow = 'hidden';
            //     //
            //     var count = 0;
            //     //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
            //     var time = setInterval(function () {
            //         // 设置定时器 ，让每一次生成的标签在指定的周期内修改相应的透明度
            //         count += 5;
            //         styleImg.style.opacity = (100 - count) / 100;
            //     }, 30)
            //     // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
            //     // 设置延时定时器， 在一定的时间后清除上面的定时器，让创建的标签不再进行变化
            //     setTimeout(function () {
            //         // 使用 clearInterval() 来停止执行setInterval函数
            //         clearInterval(time);
            //         // 删除创建的标签
            //         testDiv.removeChild(styleImg);
            //     }, 250)
            // }
        }
    </script>
</body>

</html>